<template>
  <div class="departments-container">
    <div class="app-container">
      <el-card
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        class="tree-card"
      >
        <!-- 公司标题 -->
        <tree-tools
          :node-data="titleObj"
          :is-root="true"
          style="border-bottom: 1px solid #ccc"
          @showAddDialog="showAddDialog"
        />
        <!-- 树形控件 props 是树形控件的配置对象, 可以配置展示的数据节点, 默认是label和children -->
        <el-tree default-expand-all :data="departs" :props="defaultProps">
          <!-- data 是当前节点的数据 -->
          <template #default="{ data }">
            <tree-tools
              :node-data="data"
              @add-depts="getDepartments"
              @showAddDialog="showAddDialog"
              @showEditDialog="showEditDialog"
            />
          </template>
        </el-tree>
      </el-card>
      <!-- 添加部门的子组件- 对话框 -->
      <add-dept
        ref="addDepts"
        :add-dialog-visible.sync="addDialogVisible"
        :node-data="nodeData"
        :souce-depts="souceDepts"
        @reload="getDepartments"
      />
    </div>
  </div>
</template>
<script>
import { reqGetDepts } from '@/api/departments'
import TreeTools from './components/TreeTools'
import AddDept from './components/AddDept'
import { tranListToTreeData } from '@/utils/index'
import mix from '@/mixins'
export default {
  name: 'Departments',
  components: {
    TreeTools,
    AddDept
  },
  mixins: [mix], // 挂载混入
  data() {
    return {
      title: '组织架构',
      // tree组件关联的数据源
      // label 展示给用户看的字段
      // children字段是父子节点的关联节点
      departs: [],
      defaultProps: {
        label: 'name', //  目前list树形展示给用户看的是name
        children: 'children' // 修改父子依赖关系
      },
      titleObj: {
        name: '',
        manager: ''
      },
      addDialogVisible: false, // 控制添加部门的对话框的布尔值
      nodeData: {}, // 被点击的部门
      souceDepts: [], // 部门列表源数据
      loading: false
    }
  },
  created() {
    this.getDepartments()
    // console.log('welcome to 组织架构')
  },
  methods: {
    // 获取部门列表
    async getDepartments() {
      // 在发送请求之前显示这个loading效果
      this.loading = true
      const { data } = await reqGetDepts()
      this.departs = tranListToTreeData(data.depts, '') // 函数的返回值是一个树形数据
      console.log(data.depts)
      this.souceDepts = data.depts // 存储了一份源数据
      this.titleObj.name = data.companyName
      this.titleObj.manager = data.companyManage || '负责人'
      this.titleObj.id = '' // 将总公司id设置为 ''  就是给一级部门找一个父级部门id
      // 请求结束后关闭loading
      this.loading = false
    },
    // 展示添加部门的对话框
    showAddDialog(nodeData) {
      this.addDialogVisible = true
      // console.log(nodeData) // 点击的部门 待会要传参 先备着
      this.nodeData = nodeData
      // 父组件直接调用子组件的方法 ref $refs
      this.$refs.addDepts.getSimpleList()
    },
    showEditDialog(nodeData) {
      this.addDialogVisible = true
      this.nodeData = nodeData // nodeData其实就是要回显的数据,但是为了严谨, 应该重新获取一下最新的部门信息数据
      this.$refs.addDepts.getSimpleList() // 获取部门负责人列表
      // 点击查看的一瞬间,获取获取点击的部门详情
      this.$refs.addDepts.getDeptInfo(nodeData.id)
    }
  }
}
</script>

<style lang="scss" scoped>
.tree-card {
  padding: 30px 30px;
  // font-size: 14px;
  ::v-deep.el-tree-node__content {
      height: 35px;
  }
  // 直接覆盖树形样式即可
::v-deep .el-tree {

    // 小三角的样式, 去掉默认的小三角的旋转效果
    .el-tree-node__expand-icon.expanded {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    // 有子节点 且未展开 +
    .el-icon-caret-right:before {
      background: url("~@/assets/common/add-circle.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 有子节点 且已展开 -
    .el-tree-node__expand-icon.expanded.el-icon-caret-right:before{
      background: url("~@/assets/common/minus-circle.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 没有子节点
    .el-tree-node__expand-icon.is-leaf::before  {
      background: url("~@/assets/common/fabulous.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }

}
}

//  绑定数据 data  展示树形节点数据  默认数据格式 label + children
//  修改默认展示的节点需要单独配置  :props=""  修改默认数据展示格式
//  default-expand-all
</style>
